<script setup lang="ts">
defineOptions({
  name: "RepairReport"
});

import { ref, onMounted, reactive, computed } from "vue";
import {
  ElButton,
  ElInput,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElTag,
  ElMessage,
  ElMessageBox,
  ElDialog,
  ElSelect,
  ElOption,
  ElForm,
  ElFormItem,
  ElDatePicker,
  ElLoading,
  ElCol,
  ElRow,
  MessageType
} from "element-plus";
import { addWorkAssignment } from "@/api/workAssignment";
// 移除未使用的date-fns导入
import {
  getRepairReportList,
  getRepairReportById,
  addRepairReport,
  updateRepairReport,
  updateRepairReportStatus,
  deleteRepairReport,
  deleteRepairReportsBatch
} from "../../../api/repair";
import { findAllCells } from "@/api/cell";
import type {
  RepairReportListVo,
  RepairReportQueryDto,
  UpdateRepairReportDto,
  UpdateRepairReportStatusDto,
  RepairReport
} from "../../../api/repair";
import type { Cell } from "@/api/cell";

// 搜索关键词
const searchKeyword = ref("");
const selectedCellId = ref(0);

// 分页数据
const currentPage = ref(1);
const pageSize = ref(10);
const totalCount = ref(0);
const loading = ref(false);

// 报事报修数据列表
const repairReports = ref<RepairReportListVo[]>([]);

// 对话框状态
const dialogVisible = ref(false);
const dialogTitle = ref("添加报事报修");
const isEdit = ref(false);

// 表单数据
const formData = reactive<UpdateRepairReportDto>({
  id: undefined,
  cellId: undefined,
  roomNumber: "",
  source: "",
  contactPerson: "",
  contactPhone: "",
  status: "待分派",
  importance: "",
  acceptTime: new Date().toLocaleString("zh-CN"),
  requiredCompleteTime: "",
  details: "",
  appointmentTime: "",
  type: "",
  handler: ""
});

// 表单校验规则
const rules = {
  cellId: [
    { required: true, message: "请选择小区", trigger: "change" },
    {
      type: "number" as const,
      min: 1,
      message: "请选择有效的小区",
      trigger: "change"
    }
  ],
  roomNumber: [{ required: true, message: "请输入房号", trigger: "blur" }],
  source: [{ required: true, message: "请选择来源", trigger: "change" }],
  contactPerson: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  contactPhone: [
    { required: true, message: "请输入联系电话", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码",
      trigger: "blur"
    }
  ],
  status: [{ required: true, message: "请选择状态", trigger: "change" }],
  importance: [{ required: true, message: "请选择重要性", trigger: "change" }],
  acceptTime: [
    { required: true, message: "请选择受理时间", trigger: "change" }
  ],
  details: [{ required: true, message: "请输入详细情况", trigger: "blur" }],
  type: [{ required: true, message: "请选择类型", trigger: "change" }]
};

// 表单引用
const formRef = ref<InstanceType<typeof ElForm>>();

// 小区数据
interface CommunityOption {
  label: string;
  value: number;
}
const communities = ref<CommunityOption[]>([{ label: "全部", value: 0 }]);

// 来源选项
const sourceOptions = ref([
  { label: "上门", value: "上门" },
  { label: "电话", value: "电话" }
]);

// 状态选项
const statusOptions = ref([
  { label: "待分派", value: "待分派" },
  { label: "处理中", value: "处理中" },
  { label: "待收款", value: "待收款" },
  { label: "已完成", value: "已完成" },
  { label: "已取消", value: "已取消" }
]);

// 重要性选项
const importanceOptions = ref([
  { label: "一般", value: "一般" },
  { label: "重要", value: "重要" },
  { label: "紧急", value: "紧急" }
]);

// 类型选项
const typeOptions = ref([
  { label: "报修", value: "报修" },
  { label: "报事", value: "报事" }
]);

// 格式化日期函数，确保日期格式为YYYY-MM-DD HH:mm:ss
const formatDateField = (date: any) => {
  if (!date) return "";

  // 创建日期对象
  const dateObj = typeof date === "string" ? new Date(date) : new Date(date);

  // 检查日期是否有效
  if (isNaN(dateObj.getTime())) return "";

  // 格式化为后端可接受的日期时间格式: YYYY-MM-DD HH:mm:ss
  const year = dateObj.getFullYear();
  const month = String(dateObj.getMonth() + 1).padStart(2, "0");
  const day = String(dateObj.getDate()).padStart(2, "0");
  const hours = String(dateObj.getHours()).padStart(2, "0");
  const minutes = String(dateObj.getMinutes()).padStart(2, "0");
  const seconds = String(dateObj.getSeconds()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

// 加载小区数据
const loadCellData = async () => {
  try {
    console.log("开始加载小区数据");
    const response = await findAllCells();
    console.log("小区数据请求响应:", response);
    if (response.code === 0 || response.code === 200) {
      const cells = response.data || [];
      console.log("加载到的小区数量:", cells.length);
      const newCommunities = [
        { label: "全部", value: 0 },
        ...cells.map((cell: Cell) => ({
          label: cell.name,
          value: cell.id
        }))
      ];
      communities.value = newCommunities;
    } else {
      console.error(
        "获取小区数据失败，错误码:",
        response.code,
        "错误信息:",
        response.message
      );
    }
  } catch (error) {
    console.error("获取小区数据失败:", error);
    ElMessage.error("获取小区数据失败");
  }
};

// 加载报事报修数据
const loadRepairReportData = async () => {
  loading.value = true;
  try {
    const queryData: RepairReportQueryDto = {
      page: currentPage.value,
      limit: pageSize.value,
      keyword: searchKeyword.value,
      cellId: selectedCellId.value === 0 ? undefined : selectedCellId.value
    };

    console.log("正在请求报事报修数据:", queryData);
    const response = await getRepairReportList(queryData);
    console.log("报事报修数据请求响应:", response);

    if (response.code === 0 || response.code === 200) {
      // 使用list属性，因为API返回的数据结构是data.list
      repairReports.value = response.data.list;
      totalCount.value = response.data.total;
      console.log("加载到的报事报修数据数量:", repairReports.value.length);
    } else {
      console.error(
        "获取报事报修数据失败，错误码:",
        response.code,
        "错误信息:",
        response.message
      );
      ElMessage.error(response.message || "获取报事报修数据失败");
    }
  } catch (error) {
    console.error("获取报事报修数据失败:", error);
    ElMessage.error("获取报事报修数据失败");
  } finally {
    loading.value = false;
  }
};

// 搜索方法
const handleSearch = () => {
  currentPage.value = 1; // 搜索时重置到第一页
  loadRepairReportData();
};

// 重置搜索
const handleReset = () => {
  searchKeyword.value = "";
  selectedCellId.value = 0;
  currentPage.value = 1;
};

// 根据小区ID查找小区名称
const findCellNameById = (cellId: number): string => {
  const community = communities.value.find(item => item.value === cellId);
  return community ? community.label : `${cellId}`;
};

// 打开添加对话框
const handleAdd = () => {
  isEdit.value = false;
  dialogTitle.value = "添加报事报修";
  resetForm();
  dialogVisible.value = true;
};

// 打开编辑对话框
const handleEdit = async (row: RepairReportListVo) => {
  isEdit.value = true;
  dialogTitle.value = "编辑报事报修";
  resetForm();

  try {
    const response = await getRepairReportById(row.id!);
    if (response.code === 0 || response.code === 200) {
      const data = response.data;
      Object.assign(formData, {
        id: data.id,
        cellId: data.cellId,
        roomNumber: data.roomNumber,
        source: data.source,
        contactPerson: data.contactPerson,
        contactPhone: data.contactPhone,
        status: data.status,
        importance: data.importance,
        acceptTime: data.acceptTime,
        requiredCompleteTime: data.requiredCompleteTime || "",
        details: data.details,
        appointmentTime: data.appointmentTime || "",
        type: data.type,
        handler: data.handler
      });
      dialogVisible.value = true;
    } else {
      ElMessage.error(response.message || "获取详情失败");
    }
  } catch (error) {
    console.error("获取报事报修详情失败:", error);
    ElMessage.error("获取详情失败");
  }
};

// 保存报事报修
const handleSave = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();

    ElLoading.service({
      lock: true,
      text: "正在保存...",
      background: "rgba(0, 0, 0, 0.7)"
    });

    // 使用已定义的formatDateField函数

    // 使用后端可接受的日期格式
    const submitData = {
      ...formData,
      acceptTime: formatDateField(formData.acceptTime),
      requiredCompleteTime: formatDateField(formData.requiredCompleteTime),
      appointmentTime: formatDateField(formData.appointmentTime)
    };

    let response;
    if (isEdit.value) {
      response = await updateRepairReport(submitData);
    } else {
      response = await addRepairReport(submitData);
    }

    if (response.code === 0 || response.code === 200) {
      ElMessage.success(isEdit.value ? "更新成功" : "添加成功");
      dialogVisible.value = false;
      await loadRepairReportData();
    } else {
      ElMessage.error(
        response.message || (isEdit.value ? "更新失败" : "添加失败")
      );
    }
  } catch (error: any) {
    console.error("保存报事报修失败:", error);
    if (!error?.message?.includes("cancel")) {
      ElMessage.error("保存失败");
    }
  } finally {
    ElLoading.service().close();
  }
};

// 更新状态
const handleUpdateStatus = async (
  row: RepairReportListVo | { id: number | undefined },
  newStatus: string
) => {
  try {
    // 只在有contactPerson属性时显示联系人信息
    const confirmMessage = 'contactPerson' in row && row.contactPerson 
      ? `确定要将「${row.contactPerson}」的报事报修状态修改为「${newStatus}」吗？`
      : `确定要将报事报修状态修改为「${newStatus}」吗？`;
      
    await ElMessageBox.confirm(
      confirmMessage,
      "确认修改",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning" as MessageType
      }
    );

    const updateData: UpdateRepairReportStatusDto = {
      id: row.id!,
      status: newStatus
    };

    const response = await updateRepairReportStatus(updateData);
    if (response.code === 0 || response.code === 200) {
      ElMessage.success("状态更新成功");
      await loadRepairReportData();
    } else {
      ElMessage.error(response.message || "状态更新失败");
    }
  } catch (error: any) {
    if (error.message !== "cancel") {
      console.error("更新状态失败:", error);
      ElMessage.error("状态更新失败");
    }
  }
};

// 删除单个报事报修
const handleDelete = async (row: RepairReportListVo) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除「${row.contactPerson}」的报事报修记录吗？`,
      "确认删除",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "danger" as MessageType
      }
    );

    const response = await deleteRepairReport(row.id!);
    if (response.code === 0 || response.code === 200) {
      ElMessage.success("删除成功");
      await loadRepairReportData();
    } else {
      ElMessage.error(response.message || "删除失败");
    }
  } catch (error: any) {
    if (error.message !== "cancel") {
      console.error("删除失败:", error);
      ElMessage.error("删除失败");
    }
  }
};

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  Object.assign(formData, {
    id: undefined,
    cellId: undefined,
    roomNumber: "",
    source: "",
    contactPerson: "",
    contactPhone: "",
    status: "待分派",
    importance: "",
    acceptTime: new Date().toLocaleString("zh-CN"),
    requiredCompleteTime: "",
    details: "",
    appointmentTime: "",
    type: "",
    handler: ""
  });
};

// 派工对话框相关
const assignmentDialogVisible = ref(false);
const assignmentForm = reactive({
  repairReportId: undefined,
  assignmentTime: new Date(),
  handler: "",
  phone: "",
  type: 0,
  totalFee: 0,
  serviceAddress: "",
  requiredTasks: "",
  assignmentNotes: ""
});
const assignmentFormRef = ref();
const assignmentRules = {
  handler: [{ required: true, message: "请输入处理人", trigger: "blur" }],
  phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
  serviceAddress: [{ required: true, message: "请输入服务地点", trigger: "blur" }],
  requiredTasks: [{ required: true, message: "请输入处理事项", trigger: "blur" }]
};

// 打开派工对话框
const openAssignmentDialog = (row) => {
  assignmentForm.repairReportId = row.id;
  assignmentForm.serviceAddress = row.roomNumber || "";
  assignmentForm.requiredTasks = row.details || "";
  assignmentDialogVisible.value = true;
};

// 提交派工信息
const submitAssignment = async () => {
  if (!assignmentFormRef.value) return;
  try {
    await assignmentFormRef.value.validate();
    const submitData = {
      repairReportId: assignmentForm.repairReportId,
      assignmentTime: formatDateField(assignmentForm.assignmentTime),
      handler: assignmentForm.handler,
      totalFee: Number(assignmentForm.totalFee),
      serviceAddress: assignmentForm.serviceAddress,
      requiredTasks: assignmentForm.requiredTasks,
      assignmentNotes: assignmentForm.assignmentNotes,
      phone: assignmentForm.phone,
      type: assignmentForm.type
    };
    
    const response = await addWorkAssignment(submitData);
    if (response.code === 0 || response.code === 200) {
      ElMessage.success("派工成功");
      assignmentDialogVisible.value = false;
      // 更新报事报修状态为处理中
      await handleUpdateStatus({ id: assignmentForm.repairReportId }, "处理中");
    } else {
      ElMessage.error(response.message || "派工失败");
    }
  } catch (error: any) {
    console.error("派工失败:", error);
    ElMessage.error("派工失败，请稍后重试");
  }
};

// 关闭派工对话框
const closeAssignmentDialog = () => {
  if (assignmentFormRef.value) {
    assignmentFormRef.value.resetFields();
  }
  assignmentDialogVisible.value = false;
};

// 关闭对话框
const closeDialog = () => {
  resetForm();
  dialogVisible.value = false;
};

// 页码变化
const handlePageChange = (val: number) => {
  currentPage.value = val;
  loadRepairReportData();
};

// 每页条数变化
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
  loadRepairReportData();
};

// 组件挂载时加载数据
onMounted(async () => {
  console.log("组件挂载，开始加载数据");
  await loadCellData();
  await loadRepairReportData();
  console.log(
    "数据加载完成，小区数量:",
    communities.value.length,
    "报事报修数量:",
    repairReports.value.length
  );
});
</script>

<template>
  <div class="repair-report-container">
    <div class="repair-report-header">
      <el-button type="primary" @click="handleAdd">+ 新增报事报修</el-button>
    </div>

    <div class="search-container">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="searchKeyword"
            placeholder="请输入搜索关键词（姓名/房号/电话）"
            clearable
            class="search-input"
            @keyup.enter="handleSearch"
          >
            <template #append>
              <el-button
                type="primary"
                @click="handleSearch"
              >搜索</el-button>
            </template>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-select
            v-model="selectedCellId"
            placeholder="请选择小区"
            clearable
          >
            <el-option
              v-for="item in communities"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-col>
      </el-row>
    </div>

    <el-table
      v-loading="loading"
      :data="repairReports"
      style="width: 100%"
      border
    >
      <el-table-column prop="id" label="ID" width="80">
        <template #default="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="cellName" label="小区" min-width="120">
        <template #default="{ row }">
          <span>{{ row.cellName || "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="roomNumber" label="房号" min-width="100">
        <template #default="{ row }">
          <span>{{ row.roomNumber || "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="contactPerson" label="联系人" min-width="100">
        <template #default="{ row }">
          <span>{{ row.contactPerson || "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="contactPhone" label="联系电话" min-width="120">
        <template #default="{ row }">
          <span>{{ row.contactPhone || "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" min-width="80">
        <template #default="{ row }">
          <el-tag size="small" :type="row.type === '报修' ? 'warning' : 'info'">
            {{ row.type || "-" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="100">
        <template #default="{ row }">
          <el-tag
            size="small"
            :type="
              row.status === '待分派'
                ? 'danger'
                : row.status === '处理中'
                  ? 'warning'
                  : row.status === '待收款'
                    ? 'primary'
                    : row.status === '已完成'
                      ? 'success'
                      : 'info'
            "
          >
            {{ row.status || "-" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="importance" label="重要性" min-width="100">
        <template #default="{ row }">
          <el-tag
            size="small"
            :type="
              row.importance === '紧急'
                ? 'danger'
                : row.importance === '重要'
                  ? 'warning'
                  : 'info'
            "
          >
            {{ row.importance || "-" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="acceptTime" label="受理时间" min-width="150">
        <template #default="{ row }">
          <span>{{
            row.acceptTime ? new Date(row.acceptTime).toLocaleString() : "-"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="handler" label="受理人" min-width="100">
        <template #default="{ row }">
          <span>{{ row.handler || "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="300" fixed="right">
        <template #default="{ row }">
            <el-button type="primary" link size="small" @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button
              v-if="row.status === '待分派'"
              type="primary"
              link
              size="small"
              @click="openAssignmentDialog(row)"
            >
              分派
            </el-button>
            <el-button
              v-if="row.status === '处理中'"
              type="warning"
              link
              size="small"
              @click="handleUpdateStatus(row, '待收款')"
            >
              待收款
            </el-button>
            <el-button
              v-if="row.status === '待收款'"
              type="success"
              link
              size="small"
              @click="handleUpdateStatus(row, '已完成')"
            >
              标记完成
            </el-button>
            <el-button
              v-if="row.status !== '已取消' && row.status !== '已完成'"
              type="info"
              link
              size="small"
              @click="handleUpdateStatus(row, '已取消')"
            >
              取消
            </el-button>
            <el-button type="danger" link size="small" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="prev, pager, next, jumper, sizes, total"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>

    <!-- 报事报修对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="700px"
      :before-close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
        class="repair-report-form"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="小区" prop="cellId">
              <el-select v-model="formData.cellId" placeholder="请选择小区">
                <el-option
                  v-for="item in communities.filter(item => item.value !== 0)"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="房号" prop="roomNumber">
              <el-input
                v-model="formData.roomNumber"
                placeholder="请输入房号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="来源" prop="source">
              <el-select v-model="formData.source" placeholder="请选择来源">
                <el-option
                  v-for="item in sourceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactPerson">
              <el-input
                v-model="formData.contactPerson"
                placeholder="请输入联系人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input
                v-model="formData.contactPhone"
                placeholder="请输入联系电话"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-select v-model="formData.status" placeholder="请选择状态">
                <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="重要性" prop="importance">
              <el-select
                v-model="formData.importance"
                placeholder="请选择重要性"
              >
                <el-option
                  v-for="item in importanceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="type">
              <el-select v-model="formData.type" placeholder="请选择类型">
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="受理人" prop="handler">
              <el-input v-model="formData.handler" placeholder="请输入受理人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="受理时间" prop="acceptTime">
              <el-date-picker
                v-model="formData.acceptTime"
                type="datetime"
                placeholder="请选择受理时间"
                style="width: 100%"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="要求完成时间">
              <el-date-picker
                v-model="formData.requiredCompleteTime"
                type="datetime"
                placeholder="请选择要求完成时间"
                style="width: 100%"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预约时间">
              <el-date-picker
                v-model="formData.appointmentTime"
                type="datetime"
                placeholder="请选择预约时间"
                style="width: 100%"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="详细情况" prop="details">
              <el-input
                v-model="formData.details"
                type="textarea"
                placeholder="请输入详细情况"
                :rows="4"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>

    <!-- 派工对话框 -->
    <el-dialog
      v-model="assignmentDialogVisible"
      title="分派任务"
      width="600px"
      :before-close="closeAssignmentDialog"
      :close-on-click-modal="false"
    >
      <el-form
        ref="assignmentFormRef"
        :model="assignmentForm"
        :rules="assignmentRules"
        label-width="120px"
        class="assignment-form"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="派发时间" prop="assignmentTime">
              <el-date-picker
                v-model="assignmentForm.assignmentTime"
                type="datetime"
                placeholder="请选择派发时间"
                style="width: 100%"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="处理人" prop="handler">
              <el-input
                v-model="assignmentForm.handler"
                placeholder="请输入处理人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input
                v-model="assignmentForm.phone"
                placeholder="请输入联系电话"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收费类型" prop="type">
              <el-radio-group v-model="assignmentForm.type">
                <el-radio :label="0">免费</el-radio>
                <el-radio :label="1">收费</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总费用" prop="totalFee">
              <el-input
                v-model="assignmentForm.totalFee"
                placeholder="请输入总费用"
                type="number"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="服务地点" prop="serviceAddress">
              <el-input
                v-model="assignmentForm.serviceAddress"
                placeholder="请输入服务地点"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="处理事项" prop="requiredTasks">
              <el-input
                v-model="assignmentForm.requiredTasks"
                type="textarea"
                placeholder="请输入处理事项"
                :rows="3"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="派工备注" prop="assignmentNotes">
              <el-input
                v-model="assignmentForm.assignmentNotes"
                type="textarea"
                placeholder="请输入派工备注"
                :rows="3"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <el-button @click="closeAssignmentDialog">取消</el-button>
        <el-button type="primary" @click="submitAssignment">确认分派</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.repair-report-container {
  padding: 20px;
}

.repair-report-header {
  margin-bottom: 20px;
}

.search-container {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.repair-report-form {
  margin-top: 20px;
}
</style>
